<template>
  <hu-modal
    title="查看审核状态"
    :show-modal.sync="show"
    :loading="HuLoading"
    :submit="false"
  >
    <div class="title_flex">
      <div style="margin-right: 10px;">
        <span class="title_name">{{ auditList.name }}</span>
      </div>
      <div
        class="text_store"
        :class="getCurrent(auditList.status).typeBut"
      >
        {{getTitle(auditList.status)}}
      </div>
      <div
        v-if="auditList.rescindedContent"
        class="icon_bgc"
      >{{auditList.rescindedContent}}</div>
    </div>
    <div style="margin-top: 10px;">
      <div style="display: flex; align-items: center">
        <template v-if="auditList.headPortraitPath">
          <el-image
            fit="cover"
            class="tent_image2"
            :src="$config.imgUrl+auditList.headPortraitPath"
            :preview-src-list="[$config.imgUrl+auditList.headPortraitPath]"
          >
          </el-image>
        </template>
        <img
          v-else
          class="tent_image2"
          src="@/assets/images/morenImg.png"
        >
        <span style="font-size: 14px; margin-left: 10px;">{{ auditList.cuser }}</span>
        <!-- <div class="icon_bgc">{{ auditList.createCompanyName }}</div> -->
      </div>
      <el-tabs
        v-model="activeName"
        style="margin-top: 5px"
      >
        <el-tab-pane
          label="基本资料"
          name="0"
        >
          <essential-item :auditList="auditList"></essential-item>
          <!-- 项目立项申请单 -->
        </el-tab-pane>
        <el-tab-pane
          label="审批信息"
          name="1"
        >
          <div style="display: flex">
            <div>
              <audit :rowTaskId="auditId" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </hu-modal>
</template>
<script>
import Audit from "@/views/components/audit/audit.vue";
import essentialItem from "@/views/components/audit/essentialItem.vue"
export default {
  components: {
    Audit,
    essentialItem,
  },
  props: {
    showModal: {
      type: Boolean,
      default: false,
    },
    auditId: {
      type: Number | String,
      default: undefined,
    },
  },
  computed: {
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
          };
        } else {
          return {};
        }
      };
    },
    // 审批状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
  },
  watch: {
    show() {
      this.$emit("update:showModal", this.show);
    },
    showModal() {
      this.show = this.showModal;
      if (!this.showModal) return;
      this.activeName = "1";
      this.addAudit();
    },
  },
  data() {
    return {
      auditList: {},
      activeName: "1",
      show: false,
    };
  },
  created() {},
  methods: {
    // 点击审核
    addAudit() {
      let params = {
        id: this.auditId,
        userId: this.$store.getters.userInfo.id,
      };
      this.$http.taskDetail(params).then(({ result }) => {
        this.auditList = result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  height: 60px;
}
.title_flex {
  display: flex;
  align-items: center;
}

.title_name {
  font-weight: 700;
  font-size: 20px;
}
.text_store {
  width: 82px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.icon_bgc {
  background: #f5f7fc;
  border: 1px solid #edf4ff;
  border-radius: 15px;
  padding: 5px 10px;
  margin-left: 10px;
}
.title_flex {
  display: flex;
  align-items: center;
}
.flex_right {
  width: 30px;
  height: 30px;
  margin-right: 7px;
}

.typeBut1 {
  color: #496dff;
  background: #f5f7fc;
  border: 1px solid #5a8bff;
  &:hover {
    background: #edf1fb;
  }
}
.typeBut2 {
  color: #39ce78;
  background: #f5fff9;
  border: 1px solid #39ce78;
  &:hover {
    background: #e7fbee;
  }
}
.typeBut3 {
  color: #fe5a57;
  background: #fff3f3;
  border: 1px solid #fe5a57;
  &:hover {
    background: #fbe6e6;
  }
}
.tent_image2 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
